<template>
  <div class="box">
    <div class="table">
      <el-button type="primary" @click="add">排班设置</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
          width="230"
        />
        <el-table-column
          prop="name"
          label="工作模式"
          width="230"
        />
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
          width="230"
        />
        <el-table-column
          prop="workDate"
          label="工作日期"
          width="230"
        />

        <el-table-column

          label="工作时间"
          width="250"
        >
          <template v-slot="{ row }">
            <span>{{ +row.workEndMinute1-+row.workPattern }}</span>
          </template>
        </el-table-column>
        <el-table-column

          prop="workSchedules[index]"
          label="操作"
          width="120"
          fixed="right"
        >
          <!-- v-slot="{ row }" -->
          <template v-slot="{ row }">
            <el-button type="text" @click="control">编辑</el-button>
            <template>
              <el-button type="text" @click="open(row.id)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination
        :page-size="+form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="+form.page"
        :total="+total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="礼拜制" name="first">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
              <el-form-item label="工作模式名称：" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="type">
                  <el-checkbox label="周一" name="type" />
                  <el-checkbox label="周二" name="type" />
                  <el-checkbox label="周三" name="type" />
                  <el-checkbox label="周四" name="type" />
                  <el-checkbox label="周五" name="type" />
                  <el-checkbox label="周六" name="type" />
                  <el-checkbox label="周日" name="type" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="工作时间" prop="type">
                <template>
                  <el-time-picker
                    v-model="value1"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  />
                </template>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane v-if="command===true" label="连续制" name="second">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
              <el-form-item label="工作模式名称：" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="连续工作天数:" prop="type">
                <div class="days">
                  <span>上</span>
                  <el-input v-model="ruleForm.workDayNum" style="width:300px" placeholder="请输入内容">
                    <template slot="append">天</template>
                  </el-input>
                  <span>休</span>
                  <el-input v-model="ruleForm.restDayNum" style="width:300px" placeholder="请输入内容">
                    <template slot="append">天</template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="工作时间" prop="type">
                <template>
                  <el-time-picker
                    v-model="value1"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  />
                </template>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ascertain">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getWorkPatterns, postWorkPatterns } from '@/api/branches'
export default {
  data() {
    return {
      form: {
        page: '1',
        pageSize: '10'
      },
      type: [],
      title: '添加工作模式',
      command: true,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ]
      },
      activeName: 'first',
      total: 0,
      tableData: [],
      dialogVisible: false,
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
    }
  },
  created() {
    this.getWorkPatterns()
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getWorkPatterns()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.getWorkPatterns()
    },
    async getWorkPatterns() {
      const res = await getWorkPatterns(this.form)
      this.tableData = res.data.items
      this.total = res.data.counts
    //   console.log(res)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async ascertain() {
      const res = await postWorkPatterns(this.ruleForm)
      console.log(res)
    },
    open(id) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    control() {
      this.dialogVisible = true
      this.command = false
      this.title = '编辑工作模式'
    },
    add() {
      this.dialogVisible = true
      this.command = true
    }

  }
}
</script>

<style>
.box{
  padding: 15px 20px;
}

.table{
  margin-top: 20px;
  background-color: white;
  padding: 20px 20px;
}

.foot{
   display:flex;
  justify-content: center;
}
.days{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
